<template>
  <el-container>
    <el-header>
      <el-row>
        <el-col :span="4">
          <div class="title">
            <el-avatar
              src="http://localhost:3000/upload/aniya.jpg"
              :size="60"
            ></el-avatar>
          </div>
        </el-col>
        <el-col :span="10">
          <div class="classify">
            <ul>
              <b>
                <li><router-link to="/">回到首页</router-link></li>
                <li><router-link to="/list">文章分类</router-link></li>
                <li><router-link to="/about">联系我们</router-link></li>
              </b>
            </ul>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="search">
            <el-input
              size="small"
              placeholder="按下回车搜索"
              width="25%"
              suffix-icon="el-icon-search"
              v-model="keyword"
              @keyup.enter.native="handleSearch"
            ></el-input>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="load">
            <el-button type="primary" size="small" @click="handlelogin"
              >登录</el-button
            >
          </div>
        </el-col>
      </el-row>
    </el-header>
    <el-main>
      <el-card class="box-card" shadow="always" style="overflow: auto">
        <div slot="header" class="clearfix">
          <span class="putwords"><P>留言板</P></span>
          <div class="name">
            昵称：
            <el-input
              v-model="name"
              style="width: 70%"
              placeholder="这里注释一下昵称哟"
            ></el-input>
          </div>
          <div class="name">
            留言：
            <el-input
              v-model="content"
              style="width: 70%"
              placeholder="这里可以给文章留言哟"
            ></el-input>
          </div>
          <div>
            <el-button type="primary" class="name" @click="handleClick">
              点击提交
            </el-button>
          </div>
        </div>
        <div
          v-for="item in items"
          :key="item.id"
          class="textitem"
          slot="header"
        >
          {{ item.name }}
          :{{ item.content }}
        </div>
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: 'Message',
  data() {
    return {
      name: '',
      content: '',
      items: [],
      keyword: '',
    }
  },
  created() {
    this.getmessage()
  },
  methods: {
    getmessage() {
      this.$api.getAllMessage().then((res) => {
        this.items = res.data.result
      })
    },
    handleClick() {
      this.$api
        .postNewMessage({ name: this.name, content: this.content })
        .then((res) => {
          this.$message.success(res.data.message)
          this.name = ''
          this.content = ''
          // 重新获取数据
          this.getmessage()
        })
    },
    handleSearch() {
      if (this.keyword == '') {
        this.getmessage()
        return
      }
      this.$api.postSearchMessage({ keyword: this.keyword }).then((res) => {
        this.items = res.data.result
      })
    },
    handlelogin() {
      window.location, (href = 'http://localhost:8080/login')
    },
  },
}
</script>

<style scoped>
a {
  text-decoration: none;
}
.router-link-active {
  text-decoration: none;
}
li {
  float: left;
  list-style: none;
  padding: 20px;
  line-height: 30px;
  font-size: 24px;
  font-family: KaiTi;
}
.search {
  margin: 20px;
  line-height: 50px;
}
.load {
  margin: 20px;
  line-height: 50px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 80vw;
  height: 70vh;
  margin: 30px auto;
  border-radius: 20px;
  background-color: rgba(233, 238, 243, 0.9);
}
.putwords {
  text-align: center;
  align-content: center;
  font-size: 40px;
  font-family: '华文行楷';
}
.name {
  margin: 20px;
}
.textitem {
  margin: 20px;
  padding-inline: 10px;
}
</style>
